<template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      status-icon
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="pass">
        <el-input v-model="ruleForm.user" placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="密 码" prop="checkPass" >
        <el-input
          placeholder="请输入密码"
          v-model="ruleForm.checkPass"
          type="password"
        />
      </el-form-item>

      <el-form-item label="确认密码" prop="cfpassword" >
        <el-input
          placeholder="请确认密码"
          v-model="ruleForm.cfpassword"
          type="password"
        />
      </el-form-item>

      <el-button type="primary" class="w100p" @click="register(forRef)">注册</el-button>
     
      
    </el-form>
  </template>
  
  <script  setup>
  import {reactive, ref} from 'vue'
  const fromRef =ref()
  const ruleForm = ref({
    user: '',
    checkPass: '',
    cfpassword: '',
  })

  const rules = ref({
    pass:[
      {required: true ,message:"请输入用户名",trigger:["change","blur"]}
      ],
    checkPass:{
      required:true,min:6,message:"请输入至少六位数的密码",trigger:["change","blur"]
    }
  })

  const register = (formEl)=>{
    if(formEl){
      formEl.validate((valid=>{
        if(valid){
          // 接口请求
        }
      }))
    }
  }
  </script>
